<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Voovan server monitor page</title>
    <link href="css/uikit.gradient.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/uikit.min.js"></script>
    <script src="js/Monitor.js"></script>
    <script src="js/Thread.js"></script>
</head>
<body id="OverView">
<nav class="uk-navbar">
    <a href="" class="uk-navbar-brand"><img src="img/logo.jpg" class="nav_logo"/></a>
    <ul class="uk-navbar-nav">
        <li class="uk-parent"><a href="Monitor.html"><span class="uk-icon-building"/>&nbsp;系统信息</a></li>
        <li class="uk-parent"><a href="MonitorPerformance.html"><span class="uk-icon-pie-chart"/>&nbsp;性能</a></li>
        <li class="uk-parent"><a href="MonitorObject.html"><span class="uk-icon-circle-o-notch"/>&nbsp;对象信息</a></li>
        <li class="uk-active"><a href="MonitorThread.html"><span class="uk-icon-cogs"/>&nbsp;线程</a></li>
        <li class="uk-parent"><a href="MonitorRequest.html"><span class="uk-icon-life-bouy"/>&nbsp;请求分析</a></li>
        <li class="uk-parent"><a href="MonitorLogs.html"><span class="uk-icon-television"/>&nbsp;日志</a></li>
    </ul>
</nav>
<div class="uk-grid" style="padding: 5px;">
    <div class="uk-width-medium-1-6">
        <ul class="uk-tab uk-tab-left tab-ext"
            data-uk-tab="{connect:'#my-tab-content1',animation: 'uk-animation-fade'}">
            <li class="uk-active"><a href=""><span class="uk-icon-cogs"/>&nbsp;线程信息</a></li>
        </ul>
    </div>
    <div class="uk-width-medium-5-6 uk-panel-box tab-content-panel">
        <ul id="my-tab-content1" class="uk-switcher">
            <li aria-hidden="false">
                <div id="AccessLog" class="uk-overflow-container" style="height:530px">
                    <div class="uk-panel-box uk-align-right" onclick="refreshThread()">
                        <span class="uk-text-primary uk-text-bold">刷新&nbsp;</span><span id="ObjectSearch" class="uk-icon-button uk-icon-search"/></span>
                    </div>
                    <table class="uk-table uk-table-hover  uk-table-striped">
                        <caption id="ThreadCount">概要信息&nbsp(共{{count}}个线程)</caption>
                        <thead>
                        <tr>
                            <th>线程ID</th>
                            <th>名称</th>
                            <th>线程组</th>
                            <th>状态</th>
                            <th>优先级</th>
                            <th>堆栈信息</th>
                        </tr>
                        </thead>
                        <tbody id="Threads">
                        <tr v-for="thread in info | orderBy 'Id' 'State'">
                            <td class="uk-text-bold uk-width-1-10">{{thread.Id}}</td>
                            <td class=" uk-width-4-10 uk-text-primary">{{thread.Name}}</td>
                            <td class=" uk-width-1-10 uk-text-warning">{{thread.ThreadGroup}}</td>
                            <td class="uk-alert {{stateClass(thread.State)}}  uk-width-2-10">{{thread.State}}</td>
                            <td class=" uk-width-1-10 uk-text-success">{{thread.Priority}}</td>
                            <td class=" uk-width-1-10" data-uk-modal="{target:'#ModalDialog'}"
                                v-on:click="showStack(thread)">
                                <div class="uk-button uk-button-link"><span class="uk-icon-cog"></span>Stacks</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>
    </div>
</div>

<div id="ModalDialog" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-large">
        <a class="uk-modal-close uk-close"></a>
        <div id="dialogContent" class="uk-overflow-container"></div>
    </div>
</div>
<div class="uk-grid footer">
    <div class="uk-container-center uk-width-2-10 uk-text-center" style="height: 30px;line-height: 30px">
        <ul class="uk-subnav uk-subnav-line uk-container-center">
            <li><a href="https://git.oschina.net/helyho/Voovan">Git@OSC</a></li>
            <li><a href="https://github.com/helyho/Voovan">GitHub</a></li>
            <li><a href="https://git.oschina.net/helyho/Voovan/issues">Issues</a></li>
            <li><a href="https://git.oschina.net/helyho/Voovan/wikis/home">Wiki</a></li>
        </ul>
    </div>
    <div class="uk-container-center uk-width-9-10 uk-text-center">
        UI made by UIKit with Jquery and baidu's eChart.
    </div>
    <div class="uk-container-center uk-width-9-10 uk-text-center">
        HTTP service made by Voovan.
    </div>
    <div class="uk-container-center uk-width-9-10 uk-text-center">
        Licensed under Apache v2 license.
    </div>
    <div class="uk-container-center uk-width-9-10 uk-text-center">
        <img src="img/logo.jpg" class="nav_logo"/>
    </div>
</div>
</body>
</html>